<template>
  <div id="bdMap" :data="data">
    <a-spin class="loading" v-if="loading"></a-spin>
  </div>
</template>

<script>
//白沙县
import hainan from './js/data.json'
export default {
  props: {
    loading: {
      type: Boolean,
    },
    isZg: {
      type: Boolean,
      default: true,
    },
    clickFunction: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    currenName: {
      type: String,
      default: '',
    },
    zoom: {
      type: Number,
      default: 1,
    },
    activeSelectLabel: {
      type: String,
      default: '',
    },
  },
  mounted() {
    setTimeout(() => {
      this.drawMap()
    }, 1000)
    // this.$nextTick(() => {
    //   this.drawMap()
    // })
  },
  watch: {
    currenName: {
      handler(newData, oldData) {
        if (newData) this.drawMap()
      },
      immediate: true,
    },
  },
  // data(val) {
  //   this.data = val
  //   if (this.data.length > 0) {
  //     this.drawMap()
  //   }
  // },
  updated() {
    this.drawMap()
  },
  methods: {
    drawMap() {
      console.log('this.data',this.data)
      //白沙县
      let hainanMap = this.$echarts.init(document.getElementById('bdMap'))
      this.$echarts.registerMap('hainan', hainan)
      //青蓝色
      let icon1 =
        'image://'
      //黄色
      let icon2 =
        'image://'
      //红色
      let icon3 =
        'image://'
      let pieces1 = []
      let max = this.data[0] == undefined ? 0 : this.data[0].value[2] //第一位是人数最多的，作为图例计算基准
      // let max = 10000
      let level = Math.ceil(max / 3)
      for (let i = 0; i < 3; i++) {
        i == 0 ? pieces1.push({ gt: i, lte: level }) : pieces1.push({ gt: i * level, lte: (i + 1) * level })
      }
      let option = {
        tooltip: {
          show: true,
          // backgroundColor: 'transparent',
          // renderMode: 'html',
          extraCssText: 'border-radius: 4px;padding: 5px 5px; background: transparent;text-align: center;',
          formatter: function (params) {
            let data = params.data
            if (data && data.name && data.count) {
            let str = `<div class="tooltip" style="border-radius: 4px;background:rgba(255,255,255,.8);padding: 15px;">
                    <p style="font-size: 18px;color: #000;font-weight: 400;text-align: left;"><span> ${
                      data.name
                    }</span></p>
                    <p style="font-size: 16px;color: #000;font-weight: 400;">疑似走私情报数：<span> ${
                      data.count ? data.count : 0
                    } /条</span></p>
              </div>`
            let resStr = str
            return resStr
            }
          },
        },
        visualMap: {
          type: 'piecewise',
          min: 0,
          max: 1000,
          left: 20,
          bottom: 10,
          showLabel: !0,
          padding: [15, 10],
          text: ['图列说明'],
          backgroundColor: 'transparent', //标题背景色
          borderColor: '#01698C', //边框颜色
          color: '#01698C',
          textStyle: {
            color: '#000',
          },
          borderWidth: 1,
          pieces: [
            {
              gt: 10000,
              label: '1w以上',
              color: '#FF1B00',
            },
            {
              gte: 5000,
              lte: 10000,
              label: '5k - 1w',
              color: '#DE6B00',
            },
            {
              gte: 1000,
              lt: 5000,
              label: '1k - 5k',
              color: '#F1CE2A',
            },
            {
              gte: 500,
              lt: 1000,
              label: '500 - 1k',
              color: 'rgba(1,63,77, 0.3)',
            },
            {
              gte: 0,
              lt: 500,
              label: '500以下',
              color: '#fff',
            },
          ],
          show: !0,
        },
        geo: {
          map: 'hainan',
          roam: true,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: this.zoom,
          // label: {
          //   show: true,
          //   color: '#000',
          //   fontSize: 16,
          // },
          // itemStyle: {
          //   normal: {
          //     borderColor: '#22A3BE',
          //     areaColor: 'rgba(1,89,98, 0.2)',
          //     borderWidth: 1,
          //     shadowBlur: 0.01,
          //     shadowColor: 'rgba(63, 218, 255, 1)',
          //   },
          //   emphasis: {
          //     areaColor: 'rgba(243, 131, 75, 0.8)',
          //     shadowOffsetX: 0,
          //     shadowOffsetY: 0,
          //     borderWidth: 0,
          //     shadowBlur: 20,
          //     shadowColor: 'rgba(0, 0, 0, 0.5)',
          //   },
          // },
          // // regions: [{
          // //   name: this.currenName,
          // //   itemStyle: {
          // //     normal: {
          // //       areaColor: this.currenName? '#00bbdf':'transparent'
          // //     }
          // //   }
          // // }]
        },
        series: [
          {
            type: 'map',
            map: 'hainan',
            // geoIndex: 0,
            zoom:  this.zoom,
            label: {
              show: true,
              color: '#000',
              fontSize: 16,
            },
           itemStyle: {
              normal: {
                borderColor: '#22A3BE',
                areaColor: 'rgba(1,89,98, 0.2)',
                borderWidth: 1,
                shadowBlur: 0.01,
                shadowColor: 'rgba(63, 218, 255, 1)',
              },
              emphasis: {
                areaColor: 'rgba(243, 131, 75, 0.8)',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            data: this.data,
            nameMap: {
                        '海口市': '海口',
                        '三亚市': '三亚',
                        '儋州市': '儋州',
                        '五指山市': '五指山',
                        '琼海市': '琼海',
                        '文昌市': '文昌',
                        '万宁市': '万宁',
                        '东方市': '东方',
                        '定安县': '定安',
                        '屯昌县': '屯昌',
                        '澄迈县': '澄迈',
                        '临高县': '临高',
                        '白沙黎族自治县': '白沙',
                        '昌江黎族自治县': '昌江',
                        '乐东黎族自治县': '乐东',
                        '陵水黎族自治县': '陵水',
                        '保亭黎族苗族自治县': '保亭',
                        '琼中黎族苗族自治县': '琼中'
                    }
          },
          // {
          //   //散点（气泡）图
          //   name: "light",
          //   type: "scatter",
          //   show: false,
          //   coordinateSystem: "geo",
          //   data: this.data,
          //   pointSize: 20,
          //   blurSize: 20,
          //   // symbol: 'pin', //气泡
          //   symbol: (realData, params) => {
          //     //自定义气泡
          //     let icon = "";
          //     if (realData[2] <= pieces1[0].lte) {
          //       // 第一个范围内，是青蓝色图标
          //       icon = icon1;
          //     } else if (realData[2] <= pieces1[1].lte) {
          //       // 第二个范围内，是黄色图标
          //       icon = icon2;
          //     } else if (realData[2] <= pieces1[2].lte) {
          //       // 第二个范围内，是红色图标
          //       icon = icon3;
          //     }
          //     // debugger
          //     return icon;
          //   },
          //   symbolSize: [8, 40],
          //   symbolOffset: [0, "-60%"],
          //   hoverAnimation: false, //是否开启鼠标 hover 的提示动画效果。
          //   label: {
          //     normal: {
          //       formatter: "{@[2]}",
          //       // position: 'right',
          //       color: "#fff",
          //       fontSize: 15,
          //       show: true
          //     },
          //     emphasis: {
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     borderType: "solid",
          //     // opacity: 0.5,
          //     shadowColor: "rgba(0, 0, 0, 1)",
          //     shadowBlur: 10
          //   }
          // }
        ],
      }
      hainanMap.setOption(option)
      // 点击事件前解绑，防止点击事件触发多次
      if (this.clickFunction) {
        hainanMap.off('click')
        hainanMap.on('click', (e) => {
          this.setAreaColor(e.name, option, hainanMap)
        })
      }
      // echart图表自适应
      window.addEventListener('resize', function () {
        hainanMap.resize()
      })
    },
    // 点击改变颜色
    setAreaColor(name, option, hainanMap) {
      // let chooseName = this.data.filter((item) => {
      //   return item.name == name;
      // })
      // option.geo.regions[0].name = name
      // option.geo.regions[0].itemStyle.normal.areaColor = name? '#00bbdf':'transparent'
      // option.series[0].itemStyl.normal.areaColor = '#AADDFF'
      // hainanMap.setOption(option)
      this.$emit('getdata', name)
    },
  },
}
</script>

<style lang="less" scoped>
#bdMap {
  flex: 1;
  position: relative;
  // z-index: 3;
  width: 70%;
  height: 100%;
  // margin-top: 150px;
  // width: 100%;
  // height: 100%;
  // position: absolute;
  // left: 0;
  // top: 5vh;
  // z-index: 1;

  // div {
  //   background-color: transparent !important;
  // }
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
</style>
